<template>
  <!-- 推荐上架 -->
  <div id="ShelfRecommended">
    <root name="ShelfRecommended">
      <SafeHeader
        v-bind="{
          title: '推荐上架',
          isBack: true,
          fixedTop: true,
        }"
      />
      <div class="shelfRecommended_wrap">
        <v-container class="px-2">
          <v-card outlined class="py-3">
            <v-row class="ma-0">
              <!-- <v-col
                class="py-0 d-flex align-center font-weight-bold"
                style="font-size: 15px"
              >
                容器
              </v-col> -->
              <v-col cols="12" class="py-1">
                <v-text-field
                  label="容器"
                  @keydown.13="scanGenerateCode"
                  class="my-0 inputPlaceholder"
                  outlined
                  autofocus
                  
                  clearable
                  v-model="ctCode"
                  hide-details
                  placeholder="请扫描或者输入容器编码"
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row class="ma-0 mt-2">
              <!-- <v-col
                cols="12"
                class="py-0 d-flex align-center font-weight-bold"
                style="font-size: 15px"
                >目标库位</v-col
              > -->
              <v-col cols="12" class="py-1">
                <v-text-field
                  id="targetWorkCellCode"
                  label="目标库位"
                  outlined
                  class="inputPlaceholder"
                  @keydown.13="scanCellCode"
                  @change="handleCellChange"
                  
                  clearable
                  v-model="targetWorkCellCode"
                  hide-details
                  placeholder="请扫描或者输入目标库位"
                ></v-text-field>
              </v-col>
            </v-row>
             <v-row class="ma-0">
              <!-- <v-col
                class="py-0 d-flex align-center font-weight-bold"
                style="font-size: 15px"
              >
                容器
              </v-col> -->
              <v-col cols="12" class="py-1">
                <v-text-field
                  label="单据编码"
                  @keydown.13="scanGenerateCode"
                  class="my-0 inputPlaceholder"
                  outlined
                  autofocus
                  
                  clearable
                  v-model="billNo"
                  hide-details
                  placeholder="请输入单据编码"
                ></v-text-field>
              </v-col>
            </v-row>
          </v-card>
        </v-container>
        <v-container class="px-0 shelfRecommended_select" style="flex: 1">
          <!-- <v-card outlined class="py-3 d-flex flex-column">
            <v-row class="ma-0" style="max-height: 32px">
              <v-col span="12" class="py-1 shelfRecommended_select_title"
                >推荐上架库位列表</v-col
              >
            </v-row>
            <v-divider class="my-2 mx-3"></v-divider>
            <v-row class="ma-0 px-4 py-1">
              <v-col class="shelfRecommended_select_content">
                <v-radio-group
                  v-model="targetWorkCellCode"
                  column
                  hide-details
                  disabled
                  v-if="tableData1.length > 0"
                >
                  <v-radio
                    :label="item.cellName"
                    color="#193690"
                    :value="item.cellCode"
                    v-for="(item, index) in tableData1"
                    :key="index"
                  ></v-radio>
                </v-radio-group>
              </v-col>
            </v-row>
          </v-card> -->
          <v-data-table
            no-data-text="暂无数据"
            hide-default-footer
            :headers="headers"
            :items="tableData1"
            disable-sort
            fixed-header
            item-key="id"
            single-select
            height="300"
            light
            class="shelfRecommended_table"
            mobile-breakpoint="0"
            :loading="loading"
            loading-text="Loading... Please wait"
            @item-selected="handleSelect"
            >
            <!-- <template v-slot:top>
              <v-row class="ma-0">
                <v-col
                  cols="12"
                  style="font-size: 15px"
                  class="py-1 d-flex align-center font-weight-bold"
                  >推荐上架库位列表</v-col
                >
              </v-row>
              <v-divider class="ma-1"></v-divider>
            </template> -->
          </v-data-table>
        </v-container>
        <div v-show="hidshow" class="footer">
        <v-bottom-navigation>
          <v-row class="ma-0 pa-2">
            <v-col class="pa-0">
              <v-btn
                block
                color="#193690"
                dark
                style="height: 100%; border-radius: 10px"
                ><span
                  style="color: #fff; font-size: 15px"
                  class="font-weight-bold"
                  @click="acc"
                  >提交</span
                ></v-btn
              >
            </v-col>
          </v-row>
        </v-bottom-navigation>
        </div>
      </div>
    </root>
    <v-overlay :value="overlay">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>
  </div>
</template>

<script>
import Root from "@/components/Root.vue";
import SafeHeader from "../../components/safeHeader_wms";
// import Message from "@/components/message_box_wms/index";
// import Storage from "@/utils/storage.js";
import wms from "@/utils/business_wms";

// import { apiList } from "@/static/apiList";
function debounce(fn, delay) {
  let timer = null;
  return function () {
    // eslint-disable-next-line prefer-rest-params
    let arg = arguments;

    clearTimeout(timer);

    timer = setTimeout(() => {
      fn.apply(this, arg);
    }, delay);
  };
}

export default {
  name: "ShelfRecommended",
  components: {
    SafeHeader,
    Root,
  },
  data() {
    return {
      docmHeight: document.documentElement.clientHeight,
      showHeight: document.documentElement.clientHeight,
      hidshow: true,
      overlay: false,
      loading: false,
      headers: [
        {
          text: "库位",
          value: "cellCode",
          align: "center",
          class: "shelfRecommended_table_header",
        },
        {
          text: "容器数量",
          align: "center",
          value: "boxNum",
          class: "shelfRecommended_table_header",
        },
      ],
      tableData1: [],
      workCellList: [
        // {
        //   id: "1",
        //   cellCode: "TL_CCQ1-02-01-01",
        //   cellName: "TL_CCQ1-02-01-01",
        // },
        // {
        //   id: "2",
        //   cellCode: "TL_CCQ1-02-01-02",
        //   cellName: "TL_CCQ1-02-01-02",
        // },
      ],
      ctCode: "", // 扫描框容器编码
      targetWorkCellCode: "", // 扫描库位编码
      billNo: "", // 单据编码
      timer: null,
      vm: this,
    };
  },
  watch: {
    showHeight: function () {
      if (this.docmHeight > this.showHeight) {
        this.hidshow = false;
      } else {
        this.hidshow = true;
      }
    },
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.showHeight = document.body.clientHeight;
      })();
    };
  },
  methods: {
    //提交方法
    acc() {
      //校验
      if (!this.ctCode || !this.targetWorkCellCode || !this.billNo) {
        window.api.toast({
          msg: "请先完善数据!",
          location: "middle",
          duration: 3000,
        });
        return false;
      }

      //暂时只支持一次只提交一个库位
      let upperData = {
        wareId: localStorage.getItem("wareId"),
        upperList: [
          { boxCode: this.ctCode, cellCode: this.targetWorkCellCode, billNo: this.billNo },
        ],
      };
      this.overlay = true;
      wms
        .post({
          url: "/transfer/create/upper",
          data: upperData,
        })
        .then((res) => {
          if (res.status == 200 && res.data.code == 200) {
            //提示提交成功
            this.overlay = false;
            //点击后刷新页面
            window.location.reload();
          }
          console.log(res);
        });
    },
    // 扫描容器，查出有无推荐库位信息
    scanGenerateCode() {
      //遮罩
      this.overlay = true;
      //传递到后台，后台给出推荐的库位
      wms
        .get({
          url: "/transfer/upper/recommend",
          data: { boxCode: this.ctCode },
        })
        .then((res) => {
          if (res.status == 200 && res.data.code == 200) {
            console.log(JSON.stringify(res.data));
            let recCells = res.data.data;
            console.log(recCells.length); 
            for (let index = 0; index < recCells.length; index++) {
              
              let cellInfo = {};
              cellInfo.id = recCells[index].cellId;
              cellInfo.cellCode = recCells[index].cellCode;
              cellInfo.cellName = recCells[index].cellName;
              cellInfo.boxNum = recCells[index].boxNum;
              this.workCellList.push(cellInfo);
            }

            this.tableData1 = this.workCellList;
            this.ctCode;
            document.getElementById("targetWorkCellCode").focus();
            this.overlay = false;
          } else {
            this.overlay = false;
            alert(res.data.message);
          }
        });
    },
    // 扫描库位编码
    scanCellCode() {
      if (!this.ctCode) {
        window.api.toast({
          msg: "请先扫描容器!",
          location: "middle",
          duration: 3000,
        });
        this.targetWorkCellCode = "";
        return false;
      }
    },
    handleSelect(e) {
      this.targetWorkCellCode = e.item.cellCode;
      console.log(e.item.cellCode);
    },
    handleCellChange(e) {
      console.log(e);
      // let that = this;
      if (e) this.searchCellList(e);
    },
    // 查询库位列表中有没有相同的
    searchCellList(e) {
      let cellInTable;
      this.workCellList.forEach((item, index) => {
        if (item.cellCode === e) {
          cellInTable = index;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>


.footer {
  position: absolute;
  padding-top: 65px;
  width: 100%;
  bottom: 0;
}
</style>

<style lang="sass" scoped>
.scanContainer
  >.row
    margin: 0
    padding: 10px

.shelfRecommended_table
  ::v-deep .v-data-table__mobile-table-row
    margin: 4px 8px
    background-color: #e8e8e8f1
  ::v-deep .v-data-table__mobile-row
    min-height: 28px !important
    // 暂无数据的显示
    ::v-deep .v-data-table__empty-wrapper
      display: flex
      justify-content: center
      align-items: center
      td
        line-height: 48px
  ::v-deep .shelfRecommended_table_header
    font-size: 14px !important

.inputPlaceholder
  ::v-deep.v-text-field__slot
    input::-webkit-input-placeholder
      font-size: 15px
    input::-moz-placeholder
      font-size: 15px
    input:-moz-placeholder
      font-size: 15px
    input:-ms-input-placeholder
      font-size: 15px
.shelfRecommended_wrap
  height: 100%
  display: flex
  flex-direction: column
  justify-content: space-between
.shelfRecommended_select
  height: 100%
  max-height: 400px
  .shelfRecommended_select_title
    font-size: 15px
    font-weight: bold
  .v-card
    height: 100%
  // background-color: #fff
  .shelfRecommended_select_content
    flex: 1
    max-height: 300px
    overflow: auto
    border-radius: 8px
    background-color: #f2f3f5
    border: 1px solid #dcdcde
    .v-input--radio-group--column .v-radio:not(:last-child):not(:only-child)
      margin-bottom: 12px
    .v-input--selection-controls
      margin-top: 0
    ::v-deep .v-radio
      display: flex
      align-items: center
      flex-wrap: nowrap
      .v-input--selection-controls__input
        height: 32px
        width: 32px
      .v-icon__svg
        height: 30px
        width: 30px
      .v-label
        font-size: 18px
</style>